<template>
    <div class="app-container">
        <HeadSearch
            v-show="showSearch"
            :searchData="searchData"
            labelWidth="100"
            :cascaderData01="[]"
            :cascaderData02="[]"
            @handleSearchChild="handleSearchChild(arguments)"
        >
        </HeadSearch>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                >新增</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                >修改</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                >删除</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >导出</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            stripe
            v-loading="loading"
            :data="tableData"
            @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="ID" width="70" align="center" prop="id"/>
            <el-table-column label="图片类型" align="center" prop="pType"/>
            <el-table-column label="图片描述" align="center" prop="name"/>
            <el-table-column label="图片" align="center" prop="pictureUrl" width="120">
                <template slot-scope="scope">
                    <el-image
                        :src="preFix + scope.row.pictureUrl"
                        class="story-image"
                        :preview-src-list="[preFix + scope.row.pictureUrl]"
                        fit="cover"
                    >
                        <div slot="placeholder" class="image-slot">
                        加载中...
                        </div>
                    </el-image>
                </template>
            </el-table-column>
              
            <el-table-column label="排序" align="center" prop="sort"/>
            <el-table-column label="备注" align="center" prop="remark"/>
            
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                fixed="right" width="120px"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="图片类型：" prop="pType">
                    <el-input v-model="form.pType" placeholder="请输入图片类型"/>
                </el-form-item>
                <el-form-item label="图片描述：" prop="name">
                    <el-input v-model="form.name" placeholder="请输入图片描述"/>
                </el-form-item>
                
               <el-form-item label="上传图片：" prop="pictureUrl">
                    <ImageUpload v-model="form.pictureUrl"/>
                </el-form-item>
                <el-form-item label="显示顺序:" prop="sort">
                    <el-input-number
                        v-model="form.sort"
                        controls-position="right"
                        :min="1"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="备注:" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listCarousel, getCarousel, addCarousel, updateCarousel, delCarousel } from "@/api/miniApp"

export default {
    name: "carouselImage",
    components: {},
    data() {
        return {
            searchData: [
                { type: "input", name: "图片描述:", key: "name", placeholder: "请输入图片描述", },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                pictureUrl: [
                    { required: true, message: "必填选项", trigger: "blur" },
                ]
            },
            preFix: process.env.VUE_APP_BASE_API,
            
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // 搜索事件 + 重置事件
        handleSearchChild(data) {
            let querySearch = JSON.parse(JSON.stringify(data[0]));
            switch (data[1]) {
                case "search": //搜索
                    this.queryParams = querySearch
                    this.handleQuery();
                break;
                case "reset": //重置
                    this.queryParams = {};
                    this.queryParams.pageNum = 1
                    this.queryParams.pageSize = 10
                    this.getList()
                break;
            }
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listCarousel(this.queryParams).then((response) => {
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                sort: 1
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            getCarousel(id).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.id != null) {
                        updateCarousel(this.form).then((response) => {
                        this.$message.success("修改成功");
                        this.open = false;
                        this.getList();
                        });
                    } else {
                        addCarousel(this.form).then((response) => {
                        this.$message.success("新增成功");
                        this.open = false;
                        this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm(
                '是否确认删除ID为"' + ids + '"的数据项?',
                "警告",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }
            )
            .then(function () {
                return delCarousel(ids);
                })
            .then(() => {
                this.getList();
                this.$message.success("删除成功");
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/dts/wxPatternmaking/export', {
                ...this.queryParams
            }, `小程序轮播图_${new Date().getTime()}.xlsx`)
        },
              
    }
};
</script>
<style scoped>

</style>
